<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 150px;
            height: 150px;
            background-color: darkred;
            float: left;
            margin: 20px;
            font-size: 16px;
            border: 10px solid gold;
        }
    </style>
</head>
<body>
    <div class="div1">变高</div>
    <div class="div2">变宽</div>
    <script>
        var oDiv1 = document.querySelector(".div1");
        var oDiv2 = document.querySelector(".div2");

        oDiv1.onmouseover = function(){
            slowMove(oDiv1, "height", 400);
        };
        oDiv2.onmouseover = function(){
//            slowMove(oDiv2, "width", 500);
            slowMove(oDiv2, "borderWidth", 50);
        };

        function getFinalStyle(element, attr){
            if(window.getComputedStyle){
                return getComputedStyle(element, null)[attr];
            }else{
                return element.currentStyle[attr];
            }
        }
        function slowMove(oElement, attr, iTarget){     // 可以变化带像素单位的所有样式
            clearInterval(oElement.timer);
            var iSpeed, iStyleVal;
            oElement.timer = setInterval(function(){
                iStyleVal = parseInt(getFinalStyle(oElement, attr));
                iSpeed = (iTarget - iStyleVal)/ 5;
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                oElement.style[attr] = iStyleVal + iSpeed + "px";
                if(iStyleVal === iTarget){
                    clearInterval(oElement.timer);
                }
            }, 30);
        }
    </script>
</body>
</html>